<template>
  <view class="container">
    <!-- 选择公证机构 -->
    <view class="card mb-40">
      <view class="section type-box">
        <view class="title-section">
          <view class="title">
            选择公证机构
            <span class="fs-28 text-red">（机构不同，费用不同，具体请咨询客服）</span>
          </view>
        </view>
        <view class="content">
          <view class="item relative" @click="changeNor(item)" :class="{'checked': item.value === nowItem.notarial_type}" v-for="(item, index) in norList" :key="index">
            {{ item.name }}
            <!-- 推荐标签 -->
            <view class="tag-box" v-if="item.value === 2">
              <span class="ebao-iconfont ebao-dianzan_kuai"></span>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 尘中尘公证 -->
    <view v-if="nowItem.notarial_type === 1" class="card">
      <view class="section">
        <view class="title-section mb-64 fs-36 relative flex align-item-center">
          <view class="title">公证状态:</view>
          <view v-if="!nowItem.notarial">
            未公证
          </view>
          <view v-if="nowItem.notarial">
            {{ nowItem.notarial.status_text }}
          </view>
          <view class="url-box">
            <a target="_blank" href="http://www.51qfq.com">管理后台</a>
          </view>
        </view>
        <view class="btn-default btn-blue" v-if="!nowItem.notarial" @click="openStartNotarizationPop">开始公证</view>
        <view v-if="nowItem.notarial">
          <view class="btn-default btn-blue mr-20" v-if="nowItem.notarial.status === 4" @click="openEnforcementPop">申请执行</view>
          <view class="btn-default btn-blue mr-20" v-if="nowItem.notarial.status === 4" @click="openNotarizationContractPop">下载合同</view>
          <view class="btn-default btn-blue mr-20" v-if="nowItem.notarial.status < 4" @click="openReNotarizationPop">重新公证</view>
          <view class="btn-default btn-blue mr-20" v-if="nowItem.notarial.status >= 1" @click="getQrcode">公证二维码</view>

          <view class="divider"></view>
          <view class="alert warning mb30" v-if="nowItem.notarial.status === 5">请按公证处要求上传图片</view>

          <view v-if="nowItem.notarial.status === 5" class="flex flex-wrap">
            <view>
              <view class="upload-box" @click="uploadpic">
                <view class="icon ios-cloud-upload" style="font-size: 104rpx; color: #3399ff;"></view>
                <view class="tip">选择图片</view>
              </view>
            </view>
            <view  v-for="(item, index) in imgList" :key="item">
              <view class="img-box mr-20">
                  <image style="width: 200rpx;height:200rpx" :src="item || ''"/>
                  <!-- 删除按钮 -->
                  <uni-button
                      shape="circle"
                      @click="deleteImg(index)"
                      class="btndel"
                  >
                    <text>×</text>
                  </uni-button>
              </view>
            </view>
          </view>
          <view v-if="nowItem.notarial.status === 5" class="mt-40 flex justify-end">
            <view class="poptip flex align-item-center" @click="saveSnDetail()">
              <view class="btn-default btn-blue" type="primary">上传至公证处</view>
            </view>
          </view>

          <view v-if="remark"><span class="fw-bold text-red">驳回原因：</span>{{ remark }}</view>
        </view>
      </view>
    </view>
    <!-- 聚证 -->
    <view v-if="nowItem.notarial_type === 2" class="card">
      <juZhengNor :nowItem="nowItem" :product_name="product_name"></juZhengNor>
    </view>

    <!-- 开始公证弹窗 -->
    <uni-popup ref="startNotarizationPop" type="center" border-radius="20rpx 20rpx 0 0">
      <view class="uni-pop-box">
        <view class="title">开始公证</view>
        <view class="mb-32">提示：请严格按照公证处要求，检查商品名称</view>
        <view class="flex">
          <view>修改商品名称：</view>
          <input v-model="product_name" placeholder="请输入商品名称" />
        </view>
        <view class="footer">
          <view class="btn cancel" @click="closeStartNotarizationPop">取消</view>
          <view class="btn confirm" @click="startNotarization">确定</view>
        </view>
      </view>
    </uni-popup>

    <!-- 重新公证弹窗 -->
    <uni-popup ref="reNotarizationPop" type="center" border-radius="20rpx 20rpx 0 0">
      <view class="uni-pop-box">
        <view class="title">重新公证</view>
        <view class="mb-32">提示：请严格按照公证处要求，检查商品名称和合同编号</view>
        <view class="flex">
          <view>修改商品名称：</view>
          <input v-model="product_name" placeholder="请输入商品名称" />
        </view>
        <view class="flex">
          <view>修改合同编号：</view>
          <view class="flex">
            <span style="margin-right: 12rpx; white-space: nowrap">{{ nowItem.order_id }}_</span>
            <input v-model="extraId" placeholder="请输入" />
          </view>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="closeReNotarizationPop">取消</view>
          <view class="btn confirm" @click="reNotarization">确定</view>
        </view>
      </view>
    </uni-popup>

    <!-- 申请执行弹窗 -->
    <uni-popup ref="enforcementPop" type="center" border-radius="20rpx 20rpx 0 0">
      <view class="uni-pop-box">
        <view class="title">申请执行</view>
        <view class="mb-32">提示：确认申请执行该订单</view>
        <view class="footer">
          <view class="btn cancel" @click="closeEnforcementPop">取消</view>
          <view class="btn confirm" @click="enforcement">确定</view>
        </view>
      </view>
    </uni-popup>

    <!-- 下载合同弹窗 -->
    <uni-popup ref="notarizationContractPop" type="center" border-radius="20rpx 20rpx 0 0">
      <view class="uni-pop-box">
        <view class="title">下载合同</view>
        <view class="mb-32">提示：确认下载该订单合同</view>
        <view class="footer">
          <view class="btn cancel" @click="closeNotarizationContractPop">取消</view>
          <view class="btn confirm" @click="notarizationContract">确定</view>
        </view>
      </view>
    </uni-popup>

    <!-- 公证二维码弹窗 -->
    <uni-popup ref="qrcodePop" type="center" border-radius="20rpx 20rpx 0 0">
      <view class="uni-pop-box">
        <view class="title">公证二维码</view>
        <view class="mb-32">提示：查看该订单公证二维码</view>
        <view class="flex-x-center">
          <image :src="qrUrl" style="width:600rpx;height:600rpx;"></image>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="closeQrcodePop">取消</view>
          <view class="btn confirm" @click="closeQrcodePop">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import juZhengNor from "./juZhengNor.vue";
import {
  changeNor,
  checkVideo, enforcement,
  getAdminOrderDetail,
  getAdminRefundDetail,
  getGoodsName, getQrcode,
  getStoreOrderDetail,
  getStoreRefundDetail, notarizationContract, reNotarization, saveSnDetail, sendMsg, startNotarization
} from "@/api/admin";

export default {
  components: { juZhengNor },
  data() {
    return {
      nowItem: {},
      // 上传图片
      modalPic: false,
      isChoice: '',
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      imgList: [],
      startShow: false,
      product_name: '',
      reShow: false,
      extraId: '',
      qrShow: false,
      qrUrl: '',
      remark: '',
      norList: [
        {
          name: '尘中尘公证',
          value: 1
        },
        {
          name: '聚证时代公证',
          value: 2
        }
      ],
      statusType: '',
      order_id: "",
      refundMoney: ''
    };
  },
  watch: {
    // 深度监听nowItem
    nowItem: {
      handler(newVal, oldVal) {
        console.log('变了');
      },
      deep: true
    }
  },

  onLoad(options) {
    if (options.order_id) {
      this.statusType = options.statusType;
      this.order_id = options.order_id;
      this.getIndex();
    }
  },
  methods: {
    getIndex: function () {
      let that = this;
      let obj = '';
      if (that.statusType == -3) {
        let funApi = '';
        if (this.storeNum) {
          funApi = getAdminRefundDetail(that.order_id);
        } else {
          funApi = getStoreRefundDetail(that.order_id);
        }
        obj = funApi;
      } else {
        let funApi = '';
        if (this.storeNum) {
          funApi = getAdminOrderDetail(that.order_id);
        } else {
          funApi = getStoreOrderDetail(that.order_id);
        }
        obj = funApi;
      }
      // uni.showLoading({
      //   title: '加载中',
      // })
      obj.then((res) => {
        // uni.hideLoading()
        that.nowItem = res.data;

        this.imgList = this.nowItem.order_lease.sn_detail || [];
        this.product_name = this.getCartInfo().productInfo.store_name;
        this.getGoodsName();
        this.getRemark();
      });
    },
    // 获取简化名称
    getGoodsName() {
      getGoodsName({
        product_name: this.product_name
      }).then((res) => {
        if (res.status === 200) {
          this.product_name = res.data[0];
        }
      });
    },
    // 获取购物车第一个订单
    getCartInfo() {
      return this.nowItem.cartInfo[0];
    },
    // 上传手持身份证
    // 获取单张图片信息
    getPicD(pc) {
      // 多选的图片
      let pcList = [];
      pc.forEach((item) => {
        pcList.push(item.att_dir);
      });

      let imgs = [...this.imgList];
      imgs = [...pcList, ...imgs];
      this.imgList = [...imgs];
      this.closeUploadPicPop();
    },
    deleteImg(index) {
      uni.showModal({
        title: '提示',
        content: '确定删除吗？',
        success: (res) => {
          if (res.confirm) {
            let imgs = [...this.imgList];
            imgs.splice(index, 1);
            this.imgList = [...imgs];
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          }
        }
      });

    },
    saveSnDetail() {
      if (!this.imgList.length) {
        uni.showToast({
          title: '请上传图片',
          icon: 'none'
        });
        return;
      }
      // uniapp确认对话框
      uni.showModal({
        title: '提示',
        content: '确定要上传图片吗？',
        success: (res) => {
          if (res.confirm) {
            saveSnDetail(this.nowItem.id, {
              sn_detail: this.imgList,
            }).then((res) => {
              if (res.status === 200) {
                uni.showToast({
                  title: '上传成功',
                  icon: 'success'
                });
              }
            });
          }
        }
      });


    },

    // 重新公证
    reNotarization() {
      reNotarization(this.nowItem.id, {
        extra_no: this.extraId,
        product_name: this.product_name
      }).then((res) => {
        if (res.status === 200) {
          uni.showToast({
            title: '重新公证成功',
            icon: 'success'
          });
          this.closeReNotarizationPop();
        }
      });
    },
    // 公证管理
    startNotarization() {
      startNotarization(this.nowItem.id, {
        product_name: this.product_name
      }).then((res) => {
        if (res.status === 200) {
          uni.showToast({
            title: '开始公证成功',
            icon: 'success'
          });
          this.closeStartNotarizationPop();
        }
      });
    },
    notarizationContract() {
      notarizationContract(this.nowItem.id, {
        order_id: this.nowItem.order_id
      }).then((res) => {
        if (res.status === 200) {
          uni.downloadFile({
            url: res.data.url,
            success: function (res) {
              if (res.statusCode === 200) {
                uni.openDocument({
                  filePath: res.tempFilePath,
                  success: function () {
                    uni.showToast({
                      title: '合同下载成功',
                      icon: 'success'
                    });
                  }
                });
              }
            }
          });
          this.closeNotarizationContractPop();
        }
      });
    },
    sendMsg() {
      sendMsg(this.nowItem.id, {
        order_id: this.nowItem.order_id
      }).then((res) => {
        uni.showToast({
          title: '短信发送成功',
          icon: 'success'
        });
      });
    },
    checkVideo() {
      checkVideo(this.nowItem.id, {
        order_id: this.nowItem.order_id
      }).then((res) => {
      }).finally((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
      });
    },
    // 申请执行
    enforcement() {
      enforcement(this.nowItem.id, {
        order_id: this.nowItem.order_id
      }).then((res) => {
        if (res.status === 200) {
          uni.showToast({
            title: '申请执行成功',
            icon: 'success'
          });
          this.closeEnforcementPop();
        }
      });
    },
    // 公证二维码
    getQrcode() {
      getQrcode(this.nowItem.id, {
        order_id: this.nowItem.order_id
      }).then((res) => {
        if (res.status === 200) {
          this.qrUrl = res.data.qr_code;
          this.openQrcodePop();
        }
      });
    },

    // 驳回原因
    getRemark() {
      if (this.nowItem.notarial && this.nowItem.notarial.status === 1) {
        getRemark({
          order_id: this.nowItem.order_id
        }).then((res) => {
          if (res.status === 200) {
            this.remark = res.data.remark;
          }
        });
      }
    },

    // 切换公证类型
    changeNor(item) {
      if (item.value === this.nowItem.notarial_type) return;
      uni.showModal({
        title: '提示',
        content: `是否选择${item.name}`,
        success: (res) => {
          if (res.confirm) {
            // 用户点击确认后，执行实际的切换操作
            uni.showLoading({
              title: '加载中'
            });
            changeNor({
              id: this.nowItem.id,
              notarial_type: item.value
            }).then((res) => {
              if (res.status === 200) {
                uni.showToast({
                  title: '切换成功',
                  icon: 'success'
                });
                this.getIndex()
              }
            }).finally(() => {
              uni.hideLoading();
            });
          }
        }
      });
    },

    // 打开开始公证弹窗
    openStartNotarizationPop() {
      this.$refs.startNotarizationPop.open();
    },
    // 关闭开始公证弹窗
    closeStartNotarizationPop() {
      this.$refs.startNotarizationPop.close();
    },

    // 打开重新公证弹窗
    openReNotarizationPop() {
      this.$refs.reNotarizationPop.open();
    },
    // 关闭重新公证弹窗
    closeReNotarizationPop() {
      this.$refs.reNotarizationPop.close();
    },

    // 打开申请执行弹窗
    openEnforcementPop() {
      this.$refs.enforcementPop.open();
    },
    // 关闭申请执行弹窗
    closeEnforcementPop() {
      this.$refs.enforcementPop.close();
    },

    // 打开下载合同弹窗
    openNotarizationContractPop() {
      this.$refs.notarizationContractPop.open();
    },
    // 关闭下载合同弹窗
    closeNotarizationContractPop() {
      this.$refs.notarizationContractPop.close();
    },

    // 打开公证二维码弹窗
    openQrcodePop() {
      this.$refs.qrcodePop.open();
    },
    // 关闭公证二维码弹窗
    closeQrcodePop() {
      this.$refs.qrcodePop.close();
    },

    // 打开上传图片弹窗
    openUploadPicPop() {
      this.$refs.uploadPicPop.open();
    },
    // 关闭上传图片弹窗
    closeUploadPicPop() {
      this.$refs.uploadPicPop.close();
    },

    // 打开选择图片
    openChoosePic() {
      // 这里可以添加选择图片的逻辑
      this.closeUploadPicPop();
    },

    uploadpic: function() {
      let that = this;
      this.canvasStatus = true
      that.$util.uploadImageChange('upload/image', (res) => {
        this.imgList.push(res.data.url);
      });
    },
  }
};
</script>

<style lang="stylus" scoped>
.container {
  padding: 40rpx;
}

.card {
  padding: 50rpx 0;
  .title-section {
    display: flex;
    align-items: center;
    font-size: 36rpx;
    color: #333;
  }
  .title {
    padding-left: 20rpx;
    border-left: 6rpx solid #1890FF;
    margin-right: 40rpx;
    font-weight: bold;
    color: #666;
  }
.img-box{
  position: relative;
  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    right: 0;
    top: -4px;
  }
}
  .upload-box {
    width: 200rpx;
    height: 200rpx;
    border: 2rpx dashed #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    &:hover {
      border-color: #3399ff;
      cursor: pointer;
    }
    .tip {
      color: #999;
    }
  }
}

.divider {
  border-bottom: 2rpx dashed #EEEEEE;
  margin: 40rpx 0;
}

.alert {
  padding: 20rpx;
  border-radius: 8rpx;
  margin-bottom: 60rpx;
}

.warning {
  background-color: #fff6cc;
  color: #ff9900;
}

.url-box {
  //display: flex;
  //justify-content: flex-end;
  position: absolute;
  right: 0;
  font-size: 32rpx;
}

.type-box {
  .content {
    display: flex;
    margin-top: 52rpx;
    .item {
      width: 300rpx;
      border: 2rpx solid #ccc;
      border-radius: 8rpx;
      margin-right: 40rpx;
      text-align: center;
      height: 140rpx;
      line-height: 140rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #999;
      cursor: pointer;
      .tag-box {
        top: 0;
        position: absolute;
        right: 0;
        line-height: 1;
        background: #19be6b;
        padding: 4rpx 12rpx 6rpx;
        border-bottom-left-radius: 12rpx;
        color: #fff;
        font-weight: normal;
        .ebao-iconfont {
          font-size: 28rpx;
        }
      }
    }
    .checked {
      background: #3490f1;
      color: #fff;
      border-color: #3490f1;
    }
  }
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 40rpx;
  border-radius: 16rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.modal-title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 40rpx;
}

.uni-pop-box {
  padding: 20rpx;
}

//.title {
//  font-size: 36rpx;
//  font-weight: bold;
//  margin-bottom: 20rpx;
//}

.mb-32 {
  margin-bottom: 32rpx;
}

.flex {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.btn {
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  cursor: pointer;
}

.cancel {
  background-color: #eee;
  margin-right: 20rpx;
}

.confirm {
  background-color: #1890FF;
  color: #fff;
}
</style>